<template>
    <div>
        <el-form :model="role" ref="form" :rules="rules" label-width="80px" :inline="false" status-icon
            style="margin: 0 auto; width: 55vh;">
            <el-form-item label="角色名称" prop="name">
                <el-input v-model="role.name" placeholder="请输入角色名称"></el-input>
            </el-form-item>
            <!-- <el-form-item label="数据类型" prop="type">
                <el-select v-model="role.type" placeholder="请选择数据类型" size="large">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item> -->
            <el-form-item label="价格屏蔽">
                <el-select v-model="role.priceLimit" value-key="id" multiple placeholder="请选择价格屏蔽">
                    <el-option v-for="item in priceLimits" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="role.description" placeholder="请输入备注"></el-input>
            </el-form-item>

        </el-form>
        <div class="button-container">
            <el-button type="primary" @click="onSubmit(form)">确定</el-button>
            <el-button @click="close">取消</el-button>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, defineProps, defineEmits, reactive, onMounted } from 'vue'
import request from '@/api/request';

let props = defineProps(['data'])
console.log(props.data);

let role = ref({ ...props.data })


let emits = defineEmits(['close'])
let form = ref(null)

// 数据范围
let options = ref([
    {
        key: 1,
        label: '全部数据',
        value: 1
    },
    {
        key: 3,
        label: '本机构数据',
        value: 3
    },
    {
        key: 2,
        label: '个人数据',
        value: 2
    }
])

// 屏蔽字段
let priceLimits = ref(
    [
        {
            key: 1,
            label: '屏蔽首页采购价',
            value: '1'
        },
        {
            key: 2,
            label: '屏蔽首页零售价',
            value: '2'
        },
        {
            key: 3,
            label: '屏蔽首页销售价',
            value: '3'
        },
        {
            key: 4,
            label: '屏蔽单据采购价',
            value: '4'
        },
        {
            key: 5,
            label: '屏蔽单据零售价',
            value: '5'
        },
        {
            key: 6,
            label: '屏蔽单据销售价',
            value: '6'
        }
    ]
)

let rules = reactive({
    name: [
        { required: true, message: '请输入角色名称！', trigger: 'blur' },
        {
            validator: (rule, value, callback) => {
                findRoleOne(value).then(value => {
                    if (value) {
                        callback()
                    } else {
                        callback(new Error("名称已经存在"))
                    }

                })
            }
        }
    ]
    // type: [
    //     { required: true, message: '请选择数据类型！', trigger: 'blur' }
    // ]
})



let onSubmit = (formEl) => {
    formEl.validate(v => {
        if (v) {
            if (role.value.priceLimit) {
                // 将屏蔽类型转为字符串
                let str = role.value.priceLimit.join(',')
                role.value.priceLimit = str
            }
            request.put('role/updateRole', {
                ...role.value
            }).then(resp => {
                if (resp.code == 200) {
                    close()
                }
            })
        }
    })
}

// 验证角色名名是否重复
const findRoleOne = async (roleName) => {
    const resp = await request.get("role/findRoleOne", {
        params: {
            roleName: roleName, id: 2
        }
    });
    if (resp.code == 200) {
        return resp.data;
    }
}

let close = () => {
    emits('close')
}

onMounted(() => {
    // 转换父组件传来的价格屏蔽
    let list = []
    priceLimits.value.forEach(element => {
        if (role.value.priceLimit.includes(element.label)) {
            list.push(element.value)
        }
    });
    role.value.priceLimit = list
})
</script>

<style scoped></style>
